* {
    margin: 0;
    padding: 0;
}
.btn {
    cursor: pointer;
}

.container {
    position: absolute; 
    left: 0px;
    top: 0px;

    width: 640px;
    height: 1040px;
    perspective: 500px;

    overflow: hidden;

    -webkit-user-select: none;
    touch-action: pan-y;
    -webkit-user-drag: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


/* start item list */
.container .item-list {
    position: absolute;
    transform: translate3d(0, 0, 0px);
    transform-style: preserve-3d;
    list-style: none;
}

.item-list .item {
    position: absolute;
    transform-style: preserve-3d;
    transform-origin: 50% 50% 0;
    background-repeat: no-repeat;
}

.item-list .cloud {
    animation: anim-cloud 25s linear 0s infinite;
}

@keyframes anim-cloud {
    from {left: -2200px;}
    to {left: 3000px;}
}

.item-list .hand {
    animation: anim-hand 1.5s ease-in-out 0s infinite;
}

.item-list .btn-tips:hover {
    background-position: 0 -69px;
}
/* end item list */


/* start tips list */
.tips-list .tips {
    position: absolute;
    background-repeat: no-repeat;

    width: 640px;
    height: 1138px;
    top: 0;
    left: 0;

    display: none;
}

.tips-list .btn-close {
    position: absolute;
    right: 10px;
    top: 20px;

    display: inline-block;
    width: 135px;
    height: 52px;

    background-image: url('../img/close_btn.png');
    background-repeat: no-repeat;

    transform: scale(0.55, 0.55);
}
.tips-list .btn-close:hover {
    background-position: 0 -52px;
}
.tips-list .tips img {
    position: absolute;
    opacity: 0.1;
    transform: translate3d(35px, -40px, 0px) scale(0.35, 0.35);
    animation: anim-hand 2s ease-in-out 0s infinite;
}

@keyframes anim-hand {
    0% {right: 110px; opacity: 0.1;}
    50% {right: 90px; opacity: 1;}
    100% {right: 110px; opacity: 0.1;}
}
/* end tips list */


/* start ball animation */
.item-list .ball1 {
    animation: anim-ball 3.9s ease-in-out 0s infinite;
}

.item-list .ball2 {
    animation: anim-ball 4.5s ease-in-out 0s infinite;
}

.item-list .ball3 {
    animation: anim-ball 4s ease-in-out 0s infinite;
}

.item-list .ball4 {
    animation: anim-ball 4.1s ease-in-out 0s infinite;
}

.item-list .ball5 {
    animation: anim-ball 4.2s ease-in-out 0s infinite;
}

.item-list .ball6 {
    animation: anim-ball 3.9s ease-in-out 0s infinite;
}

.item-list .ball7 {
    animation: anim-ball 3.7s ease-in-out 0s infinite;
}

@keyframes anim-ball {
    0% {
        padding-top: 0;
    }
    50% {
        padding-top: 100px;
    }
    100% {
        padding-top: 0;
    }
}
/* end ball animation */